<template>
  <div class="app-container">
   
    <table >
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>operate</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td><button @click="goEdit(item.id)"></button><button @click="deleteData(item.id)"></button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { getList, deleteUser } from '@/modules/user/model/user'

export default {
  data() {
    return {
      list: null,
      listLoading: true
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.data.items
        this.listLoading = false
      })
    },
    goEdit(id) {
      this.$router.push({ path: '/user/edit/' + id })
    },
    deleteData(id) {
      deleteUser(id).then(response => {
        window.layer.msg('submit')
        this.$router.go(0)
      })
    }

  }
}
</script>
